<template>
  <div class="home">
    <Table 
      ref='testRef'
      :tableObj="tableObj"
      @operateEvent='operateEvent'
    ></Table>
   
    <h1>--语言切换测试----{{$t("lang.标题")}}----{{$t("lang.首页")}}------------</h1>
  </div>
</template>

<script>
import Table from "@/components/table";
// import FormComp from "../components/form";
//mock数据
import {tableData1,tableData2} from '@/api/mock'
export default {
  name: "Home",
  components: { Table },
  data() {
    const ageValid = ({ cellValue }) => {
      if (!Number.isInteger(cellValue)) {
        return new Error('年龄必须为整数')
      }
    }
    return {
      tableObj: {
        id:"tabComp",
        stripe: true, //是否开启条纹
        height: 600, //表格高度
        loading: false, //表格加载loading效果
        notDrag:true,//是否允许列拖动 true不允许，多级表头不允许拖动
        classname:'testClass',//用于修改表格样式，如行样式渲染，列样式渲染
        editConfig: { trigger: "manual", mode: "row",autoClear: false }, //开启编辑表格
        editRules:{
          name:[
             { required: true, message: '姓名不能为空'},
          ],
          age:[
             { required: true, message: '年龄不能为空' },
             { validator: ageValid }
          ],
        },//数据校验
        tableData: [], //表格数据
        showFooter:true,
        footerMethod:({ columns, data })=>{
          const sum = []
          columns.forEach((column, columnIndex) => {
             if(columnIndex==0){
               sum.push("合计")
             }else{
               let sumCell;
               if(column.property=='account'){
                sumCell = this.XEUtils.sum(data, column.property).toFixed(2);
               }
               sum.push(sumCell)
             }
          })
          return [sum]
        },
        //数据列类型集合  一级表头/二级表头两种类型
        columnType: [
          {
            type: "column", //一级表头
            column: [
              {
                type: "seq",
                title: "序号",
                width: 80,
                fixed: "left",
              },
              {
                type: "checkbox",
                width: 80,
                fixed: "left",
              },
              {
                type: "radio",
                title: "单选",
                width: 80,
                fixed: "left",
              },
              {
                 title:'处理状态',
                  key:'checked',
                  minWidth:130,
                  align:'center',
                  editRender:{
                    name: 'checked'
                  }
              },
              {
                key: "name",
                title: "姓名",
                sortable: true,
                minWidth: 100,
                editRender:{
                  name: 'input', 
                  attrs: {type: 'text'}
                }
              },
              {
                key: "age",
                title: "年龄",
                sortable: true,
                minWidth: 100,
                editRender:{
                  name: 'input', 
                  attrs: {type: 'text'}
                },
                filters:[
                  {label: '大于23', value: 23},
                  {label: '大于28', value: 28},
                ],
                filteMethod:({ value, row, column })=>{
                   return row.age > value
                }
              },
              {
                key: "account",
                title: "金额",
                sortable: true,
                minWidth: 100,
                formatter: ({ cellValue }) => {
                  return Number(cellValue).toFixed(2);
                },
              },
            ],
          },
          {
            type: "groupColumn",
            title: "二级表头",
            // fixed:'right', 多级表头组固定
            column: [
              {
                key: "column1",
                title: "第1列",
                sortable: true,
                minWidth: 100,
              },
              {
                key: "column2",
                title: "第2列",
                sortable: true,
                minWidth: 100,
              },
            ],
          },
          {
            type: "column", //一级表头
            column: [
              {
                key: "remark1",
                title: "备注1带图标",
                sortable: true,
                minWidth: 100,
                cellRender:{'name':'remark1'}
              },
              {
                key: "remark2",
                title: "备注2",
                sortable: true,
                minWidth: 100,
              },
              /*
              *编辑栏----btnType值有四种类型：
              * 1.button=按钮型
              * 可配置项：
              *   key:唯一值，区分事件
              *   type：按钮类型
              *   size 按钮大小
              *   plain 朴素按钮
              *   round 是否圆角
              *   circle 是否圆形
              *   loading 是否加载中
              *   disabled 是否可点击
              *   icon 带icon图标 只需要el-icon-配置后面的名称即可，如icon:'delete'
              * 
              * 2.icon=图标型 
              * 可配置项：
              *     key:唯一值，区分事件
              *     icon:图标配置
              *     color：图标颜色
              *     size：图标大小
              *     marginLeft/ marginRight  左右边距
              * 
              * 3.switch=开关
              * 可配置项：
              *   key:唯一值，区分事件
              *   activeText：激活状态文字
              *   inactiveText：非激活状态文字
              *   activeColor：激活状态颜色
              *   inactiveColor：非激活状态颜色
              *   disabled：是否可点击
              * 
              * 4.editGroup=图标按钮组，固定组/三个事件:save,cancel,edit
              * 可配置项：
              *   size：图标大小
              *   marginLeft/ marginRight  左右边距
              * 
              * 5.popBtn=带确认按钮型
              * 可配置项：
              *   key:唯一值，区分事件
              *   content：popver显示值
              *   placement：propve位置，参考elementUI
              *   popType：button/icon 是图标还是按钮型
              *   type：按钮类型，参考elementui按钮（只存在于popType：button）
              *   icon：icon名称，取el-icon-后面值即可，（只存在于popType：icon）
              *   color：图标颜色 （只存在于popType：icon）
              *   size：图标大小（只存在于popType：icon）
              *   marginLeft/marginRight :图标左右边距（只存在于popType：icon）
              * 
              */
              {
                key:'operate',
                title:'操作',
                width:300,
                operate:true,
                fixed:'right',
                child:[
                  {
                    btnType:'button',
                    key:'ensure',
                    text:'按钮',
                    size:'mini',
                    type:'primary',
                    disabled:false,
                  },
                  {
                    btnType:'icon',
                    key:'look',
                    icon:'sunny',
                    color:'red',
                  },
                  {
                    btnType:'editGroup',
                    key:'editIcon'
                  },
                  {
                    btnType:'popBtn',
                    key:'delete',
                    type:'primary',
                    title:'删除',
                    icon:'delete',
                    popType:'icon',
                  }
                ]
              },
            ],
          },
        ],
      },
      allSelectList:[],
    };
  },
  mounted() {
    this.$nextTick(()=>{
      this.init();
    })
    this.tableObj.loading = true;
    setTimeout(() => {
      //表格0
      this.tableObj.tableData = tableData1.tableData1;
      this.tableObj.loading = false;
      this.tableRender();
      this.renderCell();
    }, 1000);
  },
  methods: {
    init(){
      let re=['2021-02-01','2021-02-02'];
      this.$set(this.$refs.formRef.formItem,'queryDate',re);
      let re2=['2021-01-02 12:30:30','2021-01-04 12:40:30'];
      this.$set(this.$refs.formRef.formItem,'queryTime',re2);
    },
    cellClickEvent(val) {},
    //操作
    operateEvent(e,row,key){
      const $table=this.$refs.testRef.$refs.table_tabComp;
      //确定
      if(key=='ensure'){
         this.$message.error("点击了"+key)
      }
      //查看
      if(key=='look'){
        this.$message.error("点击了"+key)
      }
      //编辑
      if(key=='edit'){
        this.$message.success("编辑")
        $table.setActiveRow(row)
      }
      //保存
      if(key=='save'){
         $table.clearActived().then(() => {
           const errMap = $table.validate().catch(errMap => errMap)
           if (errMap) {
              this.$message.error('校验不通过')
            } else {
               setTimeout(() => {
                  this.$message.success("保存成功")
                }, 500)
            }
          })
      }
      //取消
      if(key=='cancel'){
        $table.clearActived().then(() => {
            this.$message.error("取消")
            $table.revertData(row)
        })
      }
    },
    //可编辑自定义渲染
    tableRender(){
      this.VXETable.renderer.add('checked', {
          // 可编辑激活模板
          renderEdit (h, renderOpts, { row, column }) {
            return [
              <el-checkbox  v-model={row[column.property]}></el-checkbox>
            ]
          },
          // 可编辑显示模板
          renderCell (h, renderOpts, { row, column }) {
            return [
              <el-checkbox disabled v-model={row[column.property]}></el-checkbox>
            ]
          }
        })
    },
    //自定义单元格渲染 如:给数据后面加上图标，修改数据颜色
    renderCell(){
       // 创建一个简单的超链接渲染
        this.VXETable.renderer.add('remark1', {
          // 默认显示模板
          renderDefault (h, renderOpts, params) {
            let { row, column } = params
            let { events } = renderOpts
            return [
              <span style={{color:'red'}}>{row.remark1}<i class="el-icon-user"></i></span>
            ]
          },
        })
    },
    
  },
};
</script>
<style lang="less" scoped>
</style>
<style lang="less">
/*
*表格函数式样式修改，写法固定  
*.testClass  tableObj传入的对象
*.vxe-body--row   固定的，代表是行渲染/列渲染/表头渲染
*.row-pink  返回的渲染类名
*/ 

  .testClass .vxe-body--row.row-pink {
    background-color: pink;
  }
  .testClass .vxe-header--column.header-blue {
    background-color: #83d0f3;
  }
  .testClass .vxe-body--column.cell-yellow {
    background-color: rgb(128, 238, 179);
  }
</style>
